<template>
  <div class="common-layout" style="height: 100%;">
    <el-container v-loading="loadingFlag">
      <el-aside width="250px">

        <mini_logo></mini_logo>
        <hr />
        <div class="farm-know-title-box">
          <div v-if="htmlTitles.length > 0">
            <div :class="'link leve' + node.level" v-for="node in htmlTitles" :key="node.index"
              @click="scrollIntoVDom(node.index)">
              {{ node.title }}
            </div>
          </div>
          <div v-if="htmlTitles.length <= 0" style="font-size: 14px;color:#999999;">
            <h1>提示：</h1>
            <ul style="margin-left: -20px;line-height: 3em;">
              <li>设置<span style="color: var(--el-color-success-dark-2);">H1\H2\H3</span>创建目录...</li>
              <li>可以插入图片视频等<el-button type="primary" size="small" plain round icon=VideoPlay
                  @click="callButton('video')">添加视频</el-button></li>
              <li>插入附件并在浏览时访问<el-button type="primary" size="small" plain round icon="Paperclip"
                  @click="callButton('file')">添加附件</el-button></li>
              <li>下载网页到知识库中<el-button type="primary" size="small" plain round icon="Download"
                  @click="callButton('web')">下载网页</el-button></li>
            </ul>
          </div>
        </div>
        <div style="font-size: 12px;color: #aaaaaa;padding-left: 30px;padding-top: 8px;">
          当前字数：{{ chartLenght }}
          <div v-if="props.knowid"><span style="color: var(--el-color-danger);"> 编辑知识：</span>{{ know.title }}</div>
        </div>
        <div class="farm-full-button-box" v-if="!props.knowid">
          <el-button type="info" round plain @click="gotoPage('/home')">返回主页</el-button>
        </div>
        <div class="farm-full-button-box" v-if="props.knowid">
          <el-button type="info" round plain
            @click="farmRoutUtils.openPageByPathId('/knowview', props.knowid, '_self')">返回知识</el-button>
        </div>
        <div class="farm-full-button-box">
          <el-button type="success" @click="openSubmitForm()" round plain>提交知识</el-button>
        </div>
      </el-aside>
      <el-container>
        <el-main style="border-left: 1px solid #dddddd;border-right: 1px solid #dddddd;">
          <div class="common-layout" style="height: 100%;background-color: #ffffff;margin: auto;overflow: hidden;">
            <el-container>
              <el-main>
                <tiptap_editor :html="know.text" ref="editorRef"></tiptap_editor>
              </el-main>
            </el-container>
          </div>
        </el-main>
      </el-container>
      <el-aside :width="aiWidthRef" style="font-size: 32px;background-color: var(--el-farms-win-bg-color);">
        <ai_view :get-text-handle="getTextHandle" :resize-handle="resizeAiBoxWidth"
          :insert-editor-handle="insertEditorHandle"></ai_view>
      </el-aside>
    </el-container>
  </div>
  <submit_form :html="html" ref="submitFormRef"></submit_form>
  <to_login></to_login>
</template>
<script setup lang="ts">
import ai_view from '../know_creat/components/ai_view.vue'
import mini_logo from '../know_creat/components/mini_logo.vue';
import to_login from '@/components/user/to _login.vue';
import tiptap_editor from '../editor/tiptap_editor.vue';
import { useRouter } from 'vue-router';
import submit_form from '../know_creat/components/submit_form.vue';
import farmHtmlUtils from '@/hook/farmHtmlUtils.ts'
import { onMounted, reactive, ref } from 'vue';
import type { HtmlTitle } from "@/types/knows/HtmlTitle";
import farm2Request from '@/service/remoteRequests/Farm2Request';
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import notice from '@/components/msg/FarmNotice';
import type { DataResponse } from '@/types/commons/DataResponse';
import type { Know } from '@/types/knows/Know';
import farmRoutUtils from '@/hook/farmRoutUtils';
import type { TalkMsg } from '@/types/ai/TalkMsg';
import { useRoute } from 'vue-router';

const props = defineProps({
  knowid: {
    type: String,
    required: false
  }
});
const aiWidthRef = ref('400px');
const router = useRouter();
const loadingFlag = ref(false);
const chartLenght = ref(0);
const html = ref('');
const editorRef = ref();
const gotoPage = (path: string) => {
  router.push(path);
}
const submitFormRef = ref();
const htmlTitles: Array<HtmlTitle> = reactive([]);
const know = reactive({ text: '', title: '', author: '', pubtime: '' }) as Know;
const openSubmitForm = () => {
  html.value = editorRef.value.getHtml();
  submitFormRef.value.openWin();
}


/**
 * 获得编辑器中的内容
 */
const getTextHandle = () => {
  return editorRef.value.getHtml();
}

/**
 * 插入html到编辑器中
 */
const insertEditorHandle = (html: TalkMsg[]) => {
  editorRef.value.insertHtml(html[html.length - 1].msg);
}
const resizeAiBoxWidth = (width: string) => {
  aiWidthRef.value = width;
}

/**
 * 生成知识目录
 */
const loadHtml = () => {
  if (editorRef.value) {
    html.value = editorRef.value.getHtml();
    htmlTitles.length = 0;
    Object.assign(htmlTitles, farmHtmlUtils.getTitles(html.value));
    chartLenght.value = farmHtmlUtils.removeHtmltags(html.value).length;
    setTimeout(loadHtml, 2000);
  }
}
const callButton = (button: string) => {
  editorRef.value.callButton(button);
}
/**
 * 滚动到指定位置
 * @param index
 */
const scrollIntoVDom = (index: number) => {
  editorRef.value.scrollIntoVDom(index);
}

/**
 * 加载当前知识(在修改知识时)
 * @param index
 */
const loadKnowByEdit = (knowid: string) => {
  farm2Request.submit('api/wknow/eview', RequestTypeEnum.post, loadingFlag, { id: knowid }).then((response: DataResponse) => {
    const rknow = (response.data as Know);
    Object.assign(know, rknow);
    editorRef.value.setHtml(farm2Request.initBasePathToHtml(know.text!));
    submitFormRef.value.setKnow(know);
  }).catch((msg: string) => {
    notice.byError(msg);
  });
}

onMounted(() => {
  setTimeout(loadHtml, 2000);

  if (props.knowid) {
    loadKnowByEdit(props.knowid);
  }

  {
    const route = useRoute();
    if (route.query.initHtml) {
      editorRef.value.setHtml(route.query.initHtml);
    }
  }
});



</script>
<style scoped>
/* 样式可以根据需要添加 */

.farm-full-button-box {
  margin: 20px;
}

.farm-full-button-box button {
  width: 100%;
}

.farm-know-title-box {
  padding: 30px;
  padding-top: 10px;
  color: #666666;
  height: calc(100vh - 280px);
  max-height: calc(100vh - 200px);
  ;
  overflow: auto;

  .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .leve1 {
    font-size: 14px;
    font-weight: 700;
    margin: 24px 0px 8px 0px;
  }

  .leve2 {
    font-size: 14px;
    margin-left: 1em;
    margin: 8px 0px 8px 2px;
  }

  .leve3 {
    font-size: 14px;
    margin-left: 2em;
    color: #aaaaaa;
    margin: 8px 0px 8px 8px;
  }

  .link:hover {
    cursor: pointer;
    color: #f3616d;
  }
}
</style>
